.header {
  height: 12rem;
  background: #14a2a3;
  .brand {
    cursor: pointer;
    margin-left: 5rem;
    height: 12rem;
    display: inline-block;
    padding: 1.8rem 0;
    img {
      margin-right: 1.5rem;
    }
    & > * {
      float: left;
      color: #FFF;

      .title {
        font-size: 3.4rem;
        margin-bottom: 0;
      }
      span {
        font-size: 2.2rem;
      }
    }
  }
}

.weather {
  float: right;
  padding: 2rem;
  margin-right: 2rem;
  .weather-box {
    float: right;
    height: 8rem;
    & > div {
      float: left;;
    }
  }
  .weather-template, .weather-date, .weather-time {
    color: #FFF;
    font-size: 2.6rem;
    font-weight: 300;
    margin-left: 8.5rem;
    padding: 1rem 0;
    line-height: 3rem;
    div > div:first-child {
      font-size: 3rem;
    }
    div > div:last-child {
      font-size: 2rem;
    }
  }
  div.weather-template > div:first-child {
    font-size: 3rem;
  }
  div.weather-template > div:last-child {
    font-size: 2rem;
  }
  .weather-date, .weather-time {
    margin-left: .5rem;
  }
  .weather-date {
    text-align: right;
  }
  .weather-time {
    font-size: 7rem;
    line-height: 6rem;
    div {
      width: 100%;
    }
    span {
      font-size: 3.6rem;
      display: inline-block;
      width: 3.4rem;
    }
  }
  .weather-img {
    overflow: hidden;
  }

  .weather-img img {
    height: 8rem;
    float: left;
  }

}